<!-- 瀑布流式分类页面 -->
<template>
    <view style="padding: 0 10rpx;">
        <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @imageClick="imageClick">
        </custom-waterfalls-flow>
    </view>
</template>

<script>
	// 导入封装的request
	import { request } from '../../utils/request.js'
	
    export default {
        data() {
            return {
				data:{
					list: []	// 存放分类数据，例：{id: '1', image: '.../.../...'}
                },
				// 瀑布流布局列值，默认=2
                column: 2,
				// 发送给后端的用于接受分类数据，pageNum=6，pageSize>1时bug
				info:{
					pageNum: 20,
					pageSize: 1,
					type: '',
				}
			}
        },
		// 页面加载时调用getData()将数据赋值给data.list
		onLoad() {
			this.getData()
		},
        methods: {
			// 图片点击方法，点击跳转到分类详情页并传递参数id
            imageClick(item) {
                console.log('分类图片id:', item.id);
				uni.navigateTo({
					url: '/pages/category/caterory_detail/caterory_detail?id=' + item.id
				})
            },
			// 获取后端分类数据
			async getData(){
				// 数据处理
				let data_category = await request('/photoType/selectAll/', 'get', this.info, 'application/json');
				data_category = data_category.body.records.map(item=>({
					// 只接收item.id,item.url并转为id,image(还有item.type,item.status)
					id: item.id,
					image: item.url
				}))
				// 将后端数据赋值给data.list
				for(let i = 0; i < data_category.length; i++){
					this.data.list.push(data_category[i])
				}
				console.log(this.data.list);
			}
		}
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #ffffff;
    }
</style>
